import React, { Component } from 'react';
import GoBack from "@/components/TheGoBack";
import { QuestionCircleFilled } from "@ant-design/icons";
import { Space, Col, Tooltip, Row } from "antd";
import { getShopOrderDetail } from '@/request/storeBackManage/fundsManage/billList';
import OrderStep from './orderStep';
import OrderMemberInfo from './orderIMemberInfo';
import OrderTable from './orderTable';
class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderInfo: null,
    }
  }
  componentDidMount() {
    const { id } = this.props.match.params
    if (id) {
      this.getData(id)
    }
  }
  // 对账订单详情页
  getData = async (orderId) => {
    let res = await getShopOrderDetail({ orderId })
    if (res.code === 0 && res.data) {
      console.log(res.data,'orderPayPrice');
      this.setState({
        orderInfo: res.data
      })
    }
  }
  render() {
    let { orderInfo } = this.state;
    console.log(orderInfo,'orderInfo');
    return (
      <div className={"p-layout-box commodity-content"}>
        <GoBack history={this.props.history} title={"订单对账列表 / 订单详情"} />
        {
          orderInfo && <div>
            <OrderStep orderInfo={orderInfo}></OrderStep>
            <OrderMemberInfo memberInfo={{...orderInfo}}></OrderMemberInfo>
            <OrderTable tableInfo={orderInfo.orderDetailList}  history={this.props.history} ></OrderTable>
            <Row>
              <Col flex="auto"></Col>
              <Col flex="300px">
                <Row>
                  <Col flex="auto" style={{ textAlign: "right" }}>商品总价：</Col>
                  <Col flex="150px">
                    <React.$Price price={orderInfo.orderTotalPrice || 0} />
                  </Col>
                </Row>
                <Row>
                  <Col flex="auto" style={{ textAlign: "right" }}>运费：</Col>
                  <Col flex="150px">
                    <React.$Price price={orderInfo.freight || 0} />
                  </Col>
                </Row>
                <Row>
                  <Col flex="auto" style={{ textAlign: "right" }}>优惠：</Col>
                  <Col flex="150px">
                    <Space>
                      <React.$Price price={orderInfo.platformDiscountPrice || 0} />
                      <Tooltip title={
                        <Space direction={"vertical"}>
                          <div>优惠券抵扣：<React.$Price price={orderInfo.couponTotal || 0} /></div>
                          <div>满减抵扣：<React.$Price price={orderInfo.fullDecrementAmount || 0} /></div>
                        </Space>
                      }>
                        <QuestionCircleFilled style={{ fontSize: 20 }} />
                      </Tooltip>
                    </Space>

                  </Col>
                </Row>
                <Row>
                  <Col flex="auto" style={{ textAlign: "right" }}>哈哈豆抵扣：</Col>
                  <Col flex="150px">
                    <React.$Price price={orderInfo.integralDiscountPrice || 0} />
                  </Col>
                </Row>
                <Row style={{ color: "red" }}>
                  <Col flex="auto" style={{ textAlign: "right" }}>实付金额：</Col>
                  <Col flex="150px">
                    <React.$Price price={orderInfo.orderPayPrice || 0} />
                  </Col>
                </Row>
              </Col>
            </Row>
          </div>
        }



      </div>
    );
  }
}

export default Detail;
